<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!---注意：一定先引入jQuery库，再引入jQueryCookie的库，次序不能颠倒--->
    <!--引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--引入jQuery-Cookie插件CDN-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <style>

        h1 {
            text-align: center;
        }

        #box {
            margin: 0px auto;
            width: 420px;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
        }

        .row {
            display: flex;
            margin: 5px;
            width: 100%;
            justify-content: space-around;
        }

        .label {
            width: 20%;
        }

        .controller {
            width: 40%;
        }

        .msg {
            width: 40%;
        }

        #username_msg, #password_msg {
            color: #F00;
        }

    </style>
</head>
<body>
<h1>用户登录</h1>
<hr>

<div id="box">
    <form>
        <div class="row">
            <div class="label">用户名：</div>
            <div class="controller"><input type="text" size="18" name="username" autocomplete="off" id="username"
                                           value=""/></div>
            <div class="msg"><span id="username_msg"></span></div>
        </div>
        <div class="row">
            <div class="label">密码：</div>
            <div class="controller"><input type="password" size="18" name="password" autocomplete="off" id="password"
                                           value=""/></div>
            <div class="msg"><span id="password_msg"></span></div>
        </div>
        <div class="row">
            <div class="label"></div>
            <div class="controller"><input type="checkbox" id="rememberme" checked/>记住我</div>
            <div class="msg"></div>
        </div>
        <div class="row">
            <div class="label">&nbsp;</div>
            <div class="controller" style="text-align: center"><input style="width: 80px" type="button" id="btn"
                                                                      value="登录" onclick="doLogin()"/></div>
            <div class="msg"><span></span></div>
        </div>
    </form>
</div>

<script>

    let loginUser = {
        'username': '',
        'password': ''
    };

    //从cookie中去初始化用户名和密码
    function initUsernameAndPassword() {
        let cookie_username = $.cookie('loginUsername.www.simoniu.com');
        let cookie_password = $.cookie('loginPassword.www.simoniu.com');
        if (cookie_username !== null && cookie_username !== undefined) {
            $("#username").val(cookie_username);
        }
        if (cookie_password !== null && cookie_password !== undefined) {
            $("#password").val(cookie_password);
        }
    }

    //记住登录状态
    function rememberLoginStatus(username, password) {
        $.cookie('loginUsername.www.simoniu.com', username, {expires: 365, path: '/', domain: 'localhost'});
        $.cookie('loginPassword.www.simoniu.com', password, {expires: 365, path: '/', domain: 'localhost'});
    }

    //清除登录状态
    function removeLoginStatus() {
        // -1 表示立刻过期，就是变向删除...
        $.cookie('loginUsername.www.simoniu.com', '', {expires: -1, path: '/', domain: 'localhost'});
        $.cookie('loginPassword.www.simoniu.com', '', {expires: -1, path: '/', domain: 'localhost'});
    }


    //登录表单的验证
    function loginFormValidate() {
        //规定用户名不能为空，密码不能少于6位。
        let username = $("#username").val();
        let password = $("#password").val();
        if (username.length === 0) {
            //alert('用户名不能为空')
            $("#username_msg").text('用户名不能为空！');
            return false;
        }
        if (password.length < 6) {
            $("#password_msg").text('密码不能少于6位!');
            return false;
        }
        return true;
    }

    function doLogin() {
        $("#username_msg").text('');
        $("#password_msg").text('');
        //无论什么账号，都可以登录成功。
        if (loginFormValidate()) {
            //console.log('执行用户登录')
            let username = $("#username").val();
            let password = $("#password").val();
            loginUser.username = username;
            loginUser.password = password;

            //判断用户是否选中了记住我
            if ($("#rememberme").prop("checked")) {
                console.log('用户选择了记住我....')
                rememberLoginStatus(loginUser.username, loginUser.password);
            } else {
                console.log('用户选择了忘记我....')
                removeLoginStatus();
            }
            //注意：只能存字符串，不能存对象。把json对象转换为字符串。
            localStorage.setItem('loginSuccessUser', JSON.stringify(loginUser));
            window.location.href = 'login_success.html';
        }

    }
    window.onload = initUsernameAndPassword();

</script>
</body>
</html>
